<template>
  <div id="visualData7">
    <div class="header">
      <div class="gradient-divider">
        初烤烟近红外化学成分对比(WT202508013)
      </div>
      <div class="selector">
        <select v-model="currentIndicator" @change="updateChart">
          <option v-for="(v, key) in seriesData" :key="key" :value="key">
            {{ key }}
          </option>
        </select>
      </div>
    </div>
    <div id="barChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "visualData7",
  data() {
    return {
      categories: Array.from({ length: 16 }, (_, i) => `样区${i + 1}`),
      currentIndicator: "总植物碱%",
      seriesData: {
        "总植物碱%": {
          C3F: [2.23,1.93,2.07,1.87,2.33,2.60,2.15,2.62,2.00,2.32,2.74,2.00,2.03,2.55,2.05,2.05],
          B2F: [1.53,2.84,3.04,2.69,2.97,3.56,3.36,3.41,3.35,3.68,3.17,3.72,2.39,3.28,3.17,3.17],
          X2F: [3.05,1.46,1.49,1.53,1.98,1.55,1.43,1.84,1.64,1.69,1.80,1.67,1.53,1.81,1.74,1.91]
        },
        "还原糖%": {
          C3F: [21.0,21.5,21.0,21.8,21.4,21.9,21.8,22.1,20.2,19.6,20.7,19.3,19.9,22.5,20.9,20.9],
          B2F: [27.0,17.4,18.0,20.2,18.3,16.8,16.0,16.2,17.4,14.5,17.9,15.3,22.4,16.5,18.1,18.1],
          X2F: [17.1,17.3,18.0,26.3,21.0,23.3,18.8,19.5,22.9,18.9,21.9,19.8,9.1,15.1,24.2,18.1]
        },
        "总糖%": {
          C3F: [27.6,28.9,28.8,31.5,28.5,28.0,29.0,28.5,27.9,25.5,25.1,26.7,28.2,29.2,26.8,26.8],
          B2F: [33.5,22.5,24.2,26.5,24.4,21.5,20.5,20.8,22.0,19.0,24.2,20.0,28.9,21.6,22.3,22.3],
          X2F: [23.3,22.3,23.2,31.5,25.4,29.0,25.5,24.7,29.7,25.3,26.3,26.1,16.1,20.7,29.7,22.4]
        },
        "总氮%": {
          C3F: [1.80,1.59,1.66,1.52,1.91,1.98,1.57,1.98,1.70,1.76,2.07,1.53,1.69,1.89,1.77,1.77],
          B2F: [1.47,2.08,2.17,1.93,2.11,2.38,2.40,2.32,2.36,2.54,2.20,2.48,1.93,2.29,2.26,2.26],
          X2F: [2.12,1.53,1.53,1.39,1.64,1.52,1.49,1.65,1.46,1.66,1.62,1.62,1.60,1.66,1.48,1.74]
        },
        "K%": {
          C3F: [1.19,1.50,1.74,1.07,1.70,1.39,1.84,1.22,1.37,1.83,1.78,2.22,2.11,1.85,1.80,1.80],
          B2F: [1.77,1.46,1.66,1.34,1.41,1.27,1.87,1.59,1.60,1.94,1.59,1.67,1.76,1.85,2.11,2.11],
          X2F: [1.42,2.20,2.28,1.85,2.19,2.23,2.28,2.81,1.95,2.24,2.36,2.48,2.69,2.83,2.20,2.69]
        }
      }
    }
  },
  mounted() {
    this.updateChart();
  },
  methods: {
    updateChart() {
      const chart = echarts.init(document.getElementById('barChart'));
      const indicator = this.currentIndicator;
      chart.setOption({
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['C3F', 'B2F', 'X2F'],
          textStyle: { color: "#fff" },
          top: 40
        },
        grid: { top: '28%', left: '8%', right: '5%', bottom: '22%' },
        xAxis: {
          type: 'category',
          data: this.categories,
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: { interval: 0, rotate: 30, color: '#fff', fontSize: 11 }
        },
        yAxis: {
          type: 'value',
          name: indicator,
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: { color: '#fff' },
          splitLine: { show: false }
        },
        series: [
          { name: 'C3F', type: 'bar', data: this.seriesData[indicator].C3F, barGap: 0, itemStyle: { color: '#00A6FF' } },
          { name: 'B2F', type: 'bar', data: this.seriesData[indicator].B2F, itemStyle: { color: '#0bf8f0' } },
          { name: 'X2F', type: 'bar', data: this.seriesData[indicator].X2F, itemStyle: { color: '#31f17e' } }
        ]
      });
    }
  }
}
</script>

<style scoped lang="scss">
#visualData7 {
  padding: 0 .2em;
}

#barChart {
  height: 220px;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selector select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 2px 6px;
  border-radius: 5px;
  outline: none;
  font-size: 12px;
}

.selector select option {
  background: #1e1e1e;
  color: #fff;
}

.gradient-divider {
  font-size: 17px;
  font-weight: bold;
  border-radius: 3px;
  color: #f3f1f1;
  background: linear-gradient(to right, rgb(24, 115, 164) 0%, transparent);
  padding: 0 10px;
  height: 28px;
  display: flex;
  align-items: center;
}
</style>
